import './index.scss'
import { LeftOutline, UserCircleOutline } from 'antd-mobile-icons'
import { RightOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

function Shezhi() {
  const navigate = useNavigate()
  
  // 退出登录函数
  const handleLogout = () => {
    // 清除本地存储的token
    localStorage.removeItem('token')
    // 也可以清除其他相关的本地存储数据
    localStorage.removeItem('userInfo')
    // 导航到登录页面
    navigate('/login')
  }
  
  return (
    <div className='shezhi'>
      <div className='shezhi-top'>
        <span><LeftOutline className='shezhi-tb' onClick={() => navigate(-1)} /></span>
        <span className='shezhi-top-title'>设置</span>
      </div>
      <div className='shezhi-bg' onClick={()=>navigate('/grsz')}>
        <span >{<UserCircleOutline className='shezhi-bg-left' />}</span>
        <span className='shezhi-bg-middle'>潘诺诺</span>
        <span className='shezhi-bg-right'>{<RightOutlined />}</span>
      </div>
      <div className='shezhi-main'>
        <span className='shezhi-main-left'>修改密码</span>
        <span className='shezhi-main-right'>{<RightOutlined />}</span>
      </div>
      <div className='shezhi-main-bottom'>
        <div className='shezhi-main-bt-one'>
          <span>清除缓存</span>
          <span>{<RightOutlined className='shezhi-main-bt-right'/>}</span>
        </div>
          <div className='shezhi-main-bt-two'>
            <span>屏幕亮度</span>
            <span>{<RightOutlined className='shezhi-main-bt-right'/>}</span>
          </div>
        <div className='shezhi-main-bt-three'>
          <span>版本检查</span>
          <span>{<RightOutlined className='shezhi-main-bt-right'/>}</span>
        </div>
      </div>
      <div className='shezhi-main-bottom-two'> 
        <div className='shezhi-main-bt-four'>
          <span>帮助中心</span>
          <span>{<RightOutlined className='shezhi-main-bt-right'/>}</span>
        </div>
        <div className='shezhi-main-bt-five'>
          <span>关于我们</span>
          <span>{<RightOutlined className='shezhi-main-bt-right'/>}</span>
        </div>
      </div>
      <div className='shezhi-main-bottom-three'>
        <div className='shezhi-main-bt-six'>
          <span>邀请好友</span>
          <span>{<RightOutlined className='shezhi-main-bt-right'/>}</span>
        </div>
      </div>
      <div className='shezhi-main-bottom-four'>
        <div className='shezhi-main-bt-seven'>
          <span onClick={handleLogout}>退出登录</span>
        </div>
      </div>
      <div className='shezhi-main-bottom-five'>
      </div>
    </div>
  )
}

export default Shezhi